<!DOCTYPE html>
<html>
<head>
    <title></title>
    <script type="text/javascript" src="../internal.js"></script>
    <style type="text/css">
        .section {
            text-align: center;
            margin-top: 10px;
        }
        .section input {
            margin-left: 5px;
            width: 70px;
        }
    </style>
</head>
<body>
<div class="section">
    <span><var id="lang_tdBkColor"></var></span>
    <input type="text" id="J_tone"/>
</div>
<script type="text/javascript">
    var tone = $G('J_tone'),
      colorPiker = new UE.ui.ColorPicker({
        editor: editor
      }),
      colorPop = new UE.ui.Popup({
        editor: editor,
        content: colorPiker
      })
domUtils.on(tone, 'click', function () {
      colorPop.showAnchor(tone)
})
domUtils.on(document, 'mousedown', function () {
      colorPop.hide()
})
colorPiker.addListener('pickcolor', function () {
      tone.value = arguments[1]
    colorPop.hide()
})
colorPiker.addListener('picknocolor', function () {
      tone.value = ''
  colorPop.hide()
})
dialog.onok = function () {
      editor.execCommand('edittd', tone.value)
}

var start = editor.selection.getStart(),
      cell = start && domUtils.findParentByTagName(start, ['td', 'th'], true)
if (cell) {
      var color = domUtils.getComputedStyle(cell, 'background-color')
    if (/^#/.test(color)) {
      tone.value = color
    }
    }
</script>
</body>
</html>
